<template>
  <!-- 低卡信息加客户 -->
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索"
              border="none"
              color="#fff"
              shape="circle"
              v-model="search"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
              <clIcon
                slot="suffix"
                type="icon-saoma"
                color="#fff"
                size="20"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <u-list class="ulist" @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in goodSpuDataArr" :key="index">
        <u-row customStyle="margin-bottom: 10px;">
          <u-col span="3">
            <u-avatar
              class="m-l-20"
              text="北"
              fontSize="18"
              size="55"
              randomBgColor
              color-index="3"
            ></u-avatar>
          </u-col>
          <u-col span="6">
            <view class="flex f-40"> 21333 </view>
          </u-col>
          <u-col span="3">
            <view class="flex f-40">累欠: <text class="c-red">111</text></view>
          </u-col>
        </u-row>
        <u-gap bgColor="#eee" height="5"></u-gap>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      goodSpuDataArr: [
        {
          code: "111",
        },
      ],
      config: {
        title: "低卡信息",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      search: null,
    };
  },
  methods: {
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          name: "",
        });
      }
    },
    scrolltolower(e) {
      // 到底了
    },
    // 搜索功能
    searchChange() {},
  },
};
</script>

<style lang="scss" scoped>
.ulist {
  position: absolute;
  top: 15%;
}
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
